<template>
    <div class="home">
        <div class="banner">
            <img src="../../static/img/banner.png" alt="">
        </div>
        <div class="my_info"  @click="toMyPersonalDetails(myName)">
            <p class="ranking"></p>
            <div class="my_info_con">
                <div class="my_info_l">
                    <p class="img_url">
                        <img :src="myImg" alt="">
                    </p>
                    <p class="my_info_l_r">
                        <span class="my_info_l_r_t">{{myName}}</span>
                        <span class="my_info_l_r_b">{{myRanking}}</span>
                    </p>
                </div>
                <div class="my_info_r">
                    <p class="link_num" :class="{yellow:myThumbsUp>=900}">{{myThumbsUp}}</p>
                    <p class="pointer">
                        <img v-if="myThumbsUpStatus" src="../../static/img/toupiao48.png" alt="">
                        <img v-else src="../../static/img/toupiao-1-48.png" alt="">
                    </p>
                </div>
            </div>
        </div>
        <div class="my_like">
            <p class="my_like_title">
                <span>我的关注</span>
            </p>
        </div>
        <ul class="before_three_box">
            <li v-for="(item,index) in beforeThreeList" :key="index" @click="toPersonalDetails(item.nickName)">
                <div class="my_info">
                    <p class="ranking"></p>
                    <div class="my_info_con">
                        <div class="my_info_l">
                            <p class="img_url">
                                <img :src="item.imgHead" alt="">
                            </p>
                            <p class="my_info_l_r">
                                <span class="my_info_l_r_t">{{item.nickName}}</span>
                                <span class="my_info_l_r_b">{{item.ranking}}</span>
                            </p>
                        </div>
                        <div class="my_info_r">
                            <p class="link_num" :class="{yellow:item.thumbsUp>=900}">{{item.thumbsUp}}</p>
                            <p class="pointer">
                                <img v-if="item.thumbsUpStatus" src="../../static/img/toupiao48.png" alt="" @click.stop="removeLikeTo(item)">
                                <img v-else src="../../static/img/toupiao-1-48.png" alt="" @click.stop="addLikeTo(item)">
                            </p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="my_like">
            <p class="my_like_title">
                <span>总排行榜</span>
            </p>
        </div>
        <ul class="before_three_box">
            <li class="before_three_list" v-for="(item,index) in allRankingList" :key="index" @click="toPersonalDetails(item.nickName)">
                <div class="my_info">
                    <p class="ranking">{{index+1}}</p>
                    <div class="my_info_con">
                        <div class="my_info_l">
                            <p class="img_url">
                                <img :src="item.imgHead" alt="">
                            </p>
                            <p class="my_info_l_r">
                                <span class="my_info_l_r_t">{{item.nickName}}</span>
                            </p>
                        </div>
                        <div class="my_info_r">
                            <p class="link_num" :class="{yellow:item.thumbsUp>=900}">{{item.thumbsUp}}</p>
                            <p class="pointer">
                                <img v-if="item.thumbsUpStatus" src="../../static/img/toupiao48.png" alt="" @click.stop="removeLikeTo(item)">
                                <img v-else src="../../static/img/toupiao-1-48.png" alt="" @click.stop="addLikeTo(item)">
                            </p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      myImg: "",
      myName: "Fengdi",
      myRanking: "第三名",
      myThumbsUp: 920 /*我的点赞数量 */,
      myThumbsUpStatus: false /*是否自己已给自己点赞 */,
      beforeThreeList: [/*前三名数组 */
        {
          imgHead: "",
          nickName: "美酒1",
          ranking: "第1名",
          thumbsUp: 1024,
          thumbsUpStatus: false
        },
        {
          imgHead: "",
          nickName: "美酒2",
          ranking: "第2名",
          thumbsUp: 985,
          thumbsUpStatus: true
        },
        {
          imgHead: "",
          nickName: "美酒3",
          ranking: "第3名",
          thumbsUp: 600,
          thumbsUpStatus: false
        }
      ] ,
      allRankingList:[
          {
          imgHead: "",
          nickName: "美酒1",
          ranking: "第1名",
          thumbsUp: 1024,
          thumbsUpStatus: false
        },
        {
          imgHead: "",
          nickName: "美酒2",
          ranking: "第2名",
          thumbsUp: 985,
          thumbsUpStatus: true
        },
        {
          imgHead: "",
          nickName: "美酒3",
          ranking: "第3名",
          thumbsUp: 600,
          thumbsUpStatus: false
        },
          {
          imgHead: "",
          nickName: "美酒4",
          ranking: "第1名",
          thumbsUp: 1024,
          thumbsUpStatus: false
        },
        {
          imgHead: "",
          nickName: "美酒5",
          ranking: "第2名",
          thumbsUp: 985,
          thumbsUpStatus: true
        },
        {
          imgHead: "",
          nickName: "美酒6",
          ranking: "第3名",
          thumbsUp: 600,
          thumbsUpStatus: false
        },
      ]
    };
  },
  methods: {
    /*去其他人个人详情页面 */
    toPersonalDetails(personalId){
        this.$router.push({path:'/personalDetails',query:{personalId}});
    },
    /*去自己个人详情页面 */
    toMyPersonalDetails(myPersonalId){
        this.$router.push({path:'/personalDetails',query:{myPersonalId}});
    },
    /*点赞*/
    addLikeTo(val){
        val.thumbsUpStatus=true;
        // this.$router.push('/home')
    },
/*取消点赞 */
    removeLikeTo(val){
        val.thumbsUpStatus=false;
    }
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url(../assets/less/public.less);
.home {
  @font14();
  background: @config-bg3;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 92px;
    @flex();
    @justify5();
    background: @config-bg2;
    box-sizing: border-box;
    padding: 0 30px;
    .header_l {
      margin-right: 30px;
      img{
          width: 20px;
      }
    }
    .header_r {
      height: 56px;
      line-height: 56px;
      text-align: center;
      flex-grow: 1;
      background: @config-bg3;
      border-radius: 56px;
      @color6();
    }
  }
  .banner {
    width: 100%;
    img {
      width: 100%;
      background: @config-bg5;
      display: block;
    }
  }
  .my_info {
    background: @config-bg2;
    height: 120px;
    padding: 0 30px 0 0;
    box-sizing: border-box;
    @flex();
    @justify5();
    .my_info_con {
      flex-grow: 1;
      @flex();
      @justify5();
    }
    .ranking {
      width: 80px;
      height: 120px;
      line-height: 120px;
    }
    .my_info_l {
      @flex();
      @justify1();
      .img_url {
        width: 72px;
        height: 72px;
        border-radius: 72px;
        background: @config-bg3;
        margin-right: 20px;
      }
      .my_info_l_r {
        span {
          display: block;
          @font14();
          @color2();
          text-align: left;
        }
        .my_info_l_r_b {
          @font11();
          @color5();
        }
      }
    }
    .my_info_r {
      @flex();
      @justify3();
      .link_num {
        margin-right: 48px;
        @font24();
        @color3();
      }
      .yellow {
        @color4();
      }
      .pointer {
        width: 48px;
        img {
          width: 100%;
        }
      }
    }
  }
  .my_like {
    padding: 0 30px;
    .my_like_title {
      height: 100px;
      padding: 46px 0 22px 0;
      box-sizing: border-box;
      text-align: left;
      span {
        margin-top: 46px;
        padding-left: 10px;
        border-left: 4px solid @config-bg4;
        @color5();
      }
    }
  }
  .before_three_box {
    background: @config-bg2;
    li {
      border-bottom: 2px solid @config-bg3;
    }
    li:last-child {
      border-bottom: none;
    }
    .before_three_list {
      @flex();
      @justify5();
      box-sizing: border-box;
      padding: 0 30px 0 0;
      .my_info {
        flex-grow: 1;
        padding: 0;
      }
    }
  }
}
</style>

